import React from "react";
import { Handle, Position } from "@xyflow/react";
import useColorStore from "../../../stores/color-manage";

function ColorChooserNode({ id, data }) {
  const updateNodeColor = useColorStore((state) => state.updateNodeColor);
  return (
    <div
      style={{ backgroundColor: data.color, borderRadius: 10 }}
      className="nodrag"
      onMouseDown={() => {
        console.log("aa");
      }}
      onMouseUp={() => {
        console.log("bb");
      }}
    >
      <Handle type="target" position={Position.Top} />
      <div style={{ padding: 20 }}>
        <input
          type="color"
          defaultValue={data.color}
          className="nodrag"
          onChange={(evt) => updateNodeColor(id, evt.target.value)}
        />
      </div>
      <Handle type="source" position={Position.Bottom} />
    </div>
  );
}
export default ColorChooserNode;
